<template>
    <el-card shadow="never" class="!border-none">
        
        
        <el-button type="primary" @click="handleAddOrEdit">
            <template #icon>
                <icon name="el-icon-Plus"/>
            </template>
            新增
        </el-button>
        
        
        <el-table
            ref="paneTable"
            class="mt-4"
            size="large"
            :data="pagerData.lists"
            v-loading="pagerData.loading"
            style="width: 100%"
        >
            
            <el-table-column prop="name" label="名称" size="large" min-width="120"/>
            <el-table-column prop="groupName" label="分组" min-width="100">
                <template #default="{ row }">
                    <el-tag v-if="row.groupName === 'default'" type="success">默认</el-tag>
                    <el-tag v-if="row.groupName === 'system'" type="success">系统</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="command" label="调用目标字符串" min-width="100"/>
            <el-table-column prop="rules" label="cron表达式" min-width="100"/>
            <el-table-column prop="status" label="状态" min-width="100">
                <template #default="{ row }">
                    <el-tag v-if="row.status === 1" type="success">运行中</el-tag>
                    <el-tag v-if="row.status === 2" type="info">已停止</el-tag>
                    <el-tag v-if="row.status === 3" type="danger">错误</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="error" label="错误信息" :show-overflow-tooltip="true" min-width="120"/>
            
            
            <el-table-column label="最后执行时间" prop="endTime" min-width="120"/>
            <el-table-column prop="taskTime" label="执行耗时（ms）" min-width="100"/>
            
            
            <el-table-column label="操作" width="180" fixed="right">
                <template #default="{ row }">
                    <div class="flex">
                        <el-button type="primary"
                                   link
                                   @click="handleAddOrEdit(row)">
                            编辑
                        </el-button>
                        
                        <el-button type="primary"
                                   v-if="row.status===1"
                                   link
                                   @click="handleCloseCrontab(row)">
                            关闭
                        </el-button>
                        <el-button type="primary"
                                   v-if="row.status===2"
                                   link
                                   @click="handleCloseCrontab(row)">
                            启动
                        </el-button>
                        
                        <el-button
                            v-perms="['crontab/delete']"
                            type="danger"
                            link
                            @click="handleDelete(row)"
                        >
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
            
            
            <div class="flex justify-end mt-4">
                <pagination v-model="pagerData" @change="getPageLists"/>
            </div>
        </el-table>
    
    </el-card>
    
    
    <Edit ref="editRef" @success="handEditSuccess" @close="handEditClose" v-if="showEditRef"/>


</template>


<script lang='ts' setup name="定时任务">
import Edit from "./edit.vue"
import {usePagerManager} from "@/manager/base/PagerManager";
import {crontabDel, crontabEdit, getCronTaskList} from "@/api/scheduler/scheduler";
import feedback from "@/utils/feedback";


let editRef = shallowRef(Edit);
const showEditRef = ref(false)

const {pagerData, getPageLists} = usePagerManager({
    fetchFun: getCronTaskList,
})


/**
 * 处理成功
 */
function handEditSuccess() {
    showEditRef.value = false
    getPageLists()
    
}

/**
 * 处理关闭
 */
function handEditClose() {
    showEditRef.value = false
}


/**
 * 新增编辑任务
 */
async function handleAddOrEdit(row?: Record<string, any>) {
    showEditRef.value = true
    await nextTick()
    if (!!row) {
        editRef.value.setFormData(row)
        editRef.value.open("edit")
    } else {
        editRef.value.open()
    }
}


/**
 * 关闭当前任务
 *
 * @param row
 */
async function handleCloseCrontab(row: Record<string, any>) {
    if (row.status == 2) {
        row.status = 1
    } else {
        row.status = 2
    }
    await crontabEdit(row)
    await getPageLists()
    
}

/**
 * 删除
 *
 * @param row
 */
async function handleDelete(row: Record<string, any>) {
    await feedback.confirm('确定要删除？')
    await crontabDel({id: row.id})
    feedback.msgSuccess('删除成功')
    getPageLists()
}


onMounted(() => {
    getPageLists()
})

</script>

